import { useState, useEffect, } from 'react'
import type { ColumnsType } from 'antd/es/table';
import { Button, Table, Tag } from 'antd';
import axios from 'axios'
import { useSelector, } from 'react-redux';
import "../index.less"

export default function PersonalOrder() {
    const [info, setInfo] = useState<any>([])
    const account = useSelector((state: any) => state.account);
    useEffect(() => {
        // 在组件挂载完成后调用 query 方法
        query(account);
    }, []);
    const columns: ColumnsType<any> = [
        {
            title: '订单编号',
            dataIndex: 'orderID',
            key: 'orderID',
        },
        {
            title: '用户名称',
            dataIndex: 'user',
            key: 'user',
        },
        {
            title: '联系方式',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '商品名称',
            dataIndex: 'commodityName',
            key: 'commodityName',
        },
        {
            title: '商品数量',
            dataIndex: 'commodityNum',
            key: 'commodityNum',
        },
        {
            title: '商品价格',
            dataIndex: 'commodityPrice',
            key: 'commodityPrice',
        },
        {
            title: '订单状态',
            key: 'orderState',
            dataIndex: 'orderState',
            render: (orderState: any) => {
                let color;
                let text = "";
                switch (orderState) {
                    case "1": color = "magenta"; text = "待支付"; break;
                    case "2": color = "red"; text = "已支付未发货"; break;
                    case "3": color = "lime"; text = "已发货"; break;
                    case "4": color = "green"; text = "已签收"; break;
                    case "5": color = "geekblue"; text = "已签收"; break;
                    default: break;
                }
                return (
                    <Tag className='order_tag' color={color}>
                        <p>{text}</p>
                    </Tag>
                );
            },
        },
    ];
    useEffect(() => {
        // 监听 info 的变化，当 info 变化时，强制组件重新渲染
        setInfo(() => info);
    }, [info]);
    const query = (account: any) => {
        let params = {
            account: account
        }
        let tempData: any
        axios.post("http://localhost:8080/api/orderInfo", params).then((response) => {
            if (response.data.result) {
                // tempData = JSON.parse(JSON.stringify(response.data.result));
                tempData = response.data.result
                tempData.map((item: any, index: number) => {
                    item.key = `index${index}`
                })
                setInfo(tempData);
            }
        });
        setInfo(tempData);
    }
    return (
        <div className='person_order'>
            <Button className='person_order_button' onClick={query}>刷新</Button>
            <Table className='person_order_table' columns={columns} dataSource={info} />;
        </div>
    )
}
